//下面是实现 轮播图逻辑 的代码=======================================
// 写轮播的时候，有个套路，一定要先从小原点开始写
var index = 0;

//点击小圆点时执行
$('.dot-item').click(function () {
    //点击的时候 重启计时器 以增强用户体验
    window.clearInterval(interval1);
    // 被点击元素添加active类
    // 同时被点击元素的兄弟元素 删除active类
    var dotArr = document.querySelectorAll('.dot-item')
    index = $.inArray($(this)[0], dotArr);

    $(this).addClass('active').siblings().removeClass('active');
    $('.img-wrap a').eq(index).fadeIn().siblings().fadeOut();
    //执行完毕重启计时器
    timer();
});

//点击左箭头时执行
$('.left').click(function () {
    //点击的时候 重启计时器 以增强用户体验
    window.clearInterval(interval1);

    index === 0 ? index = 4 : index--;
    $('.dot-item').eq(index).addClass('active').siblings().removeClass('active');
    $('.img-wrap a').eq(index).fadeIn().siblings().fadeOut();

    //执行完毕重启计时器
    timer();
});

//点击右箭头时执行
$('.right').click(function () {
    //点击的时候 重启计时器 以增强用户体验
    window.clearInterval(interval1);
    index === 4 ? index = 0 : index++;

    $('.dot-item').eq(index).addClass('active').siblings().removeClass('active');
    $('.img-wrap a').eq(index).fadeIn().siblings().fadeOut();

    //执行完毕重启计时器
    timer();
});


//定时器，定时器主要根据index值的变化，重复执行>>上面点击右箭头 事件处理函数 后面的两行代码。
//相当于用函数模拟点击右箭头。
function timer() {
    window.interval1 = setInterval(function () {
        index === 4 ? index = 0 : index++;
        $('.dot-item').eq(index).addClass('active').siblings().removeClass('active');
        $('.img-wrap a').eq(index).fadeIn().siblings().fadeOut();
    }, 3000);
}
timer();
//上面是实现 轮播图逻辑 的代码=======================================